<template>
  <div class="project_clever_template">
    <el-row class="intro">
      <h1>Clever Things For
        <span id="headerSecondRow">Curious Humans
          <span id="trademarkSymbol">™</span>
        </span>
      </h1>
      <div class="container">

        <div class="img-desc"
             style="background-image: url(static/svg/crowdfunding-crowdsurfing_base.svg);"></div>
        <div class="ope-area">
          <p class="cleverThings-text">
            There’s no better place to start the hunt for something new and special. Begin on Indiegogo to find clever
            and<br>
            unconventional things that solve everyday problems large and small.
          </p>
          <button type="button" class="el-button sign-button el-button--danger"><span>SIGN UP NOW</span>
          </button>
        </div>
      </div>
    </el-row>

  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'


  export default {
    data() {
      return {
        restaurants: [],
        state4: '',
        timeout: null,
      }
    },
    mounted() {

    },
    props: ['signinUp', 'headTitle', 'goBack'],
    computed: {
      ...mapState([
        'userInfo'
      ]),
    },
    methods: {
      ...mapActions([
        'getUserInfo'
      ]),
      getBGImage(image) {
        return "background-image: url('" + image + "');"
      },
      loginInHandler() {
        this.$emit("loginInHandler")
      },
      signUpHandler() {
        this.$emit("signUpHandler")

      }
    },

  }

</script>

<style lang="scss" scoped>
  @import '../../style/mixin';

  .project_clever_template {
    clear: both;
    background-color: white;
    height: 267px;
    text-align: center;
    padding-top: 66px;
    margin-bottom: 66px;
    .intro {
      background-color: white;
    }
    .cleverThings-text {
      margin: 14px 0;
    }
    h1 {
      font-size: 40px;
    }
    .container {
      display: flex;
      justify-content: center;
      line-height: 20px;
      .img-desc {
        width: 275px;
        height: 187px;
        margin-top: 45px;
      }
      .sign-button {
        margin-top: 66px;
        font-family: "Benton Sans", "Helvetica", "sans-serif";
        font-weight: bold;
        font-size: 14px;
        line-height: 14px;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: inline-block;
        cursor: pointer;
        background-color: #E51075;
        border: 2px solid #E51075;
        padding: 11px 18px;
        border-radius: 2px;
        color: #ffffff;
        text-align: center;
        min-height: 40px;
        span {
          color: #ffffff !important;
        }
      }
    }

    .footer {
      height: 66px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-top: 2px solid #dddddd;
      padding-top: 26px;
    }

  }

</style>
